<!-- 评教管理：课堂教学质量评价汇总：督导评教结果提交 -->
<template>
  <div>
    <el-form label-suffix="：" label-position="left" style="display: flex;">
      <el-form-item label-width="55px" label="学期">
        <el-select v-model="queryForm.semester" size="mini" placeholder="请选择学期" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in semesterList" :key="index" :label="item.xqmc" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="85px" label="培养层次">
        <el-select v-model="queryForm.level" size="mini" placeholder="请选择培养层次" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in levelList" :key="index" :label="item.dictValue" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="55px" label="职称">
        <el-select v-model="queryForm.position" size="mini" clearable placeholder="请选择职称" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in positionList" :key="index" :label="item.dictValue" :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="85px" label="教员姓名">
        <el-input v-model="queryForm.teacherName" size="mini" clearable placeholder="请输入教员姓名" style="margin: 0 20px 0 -15px;" />
      </el-form-item>
      <el-form-item label-width="70px" label="教研室">
        <el-select v-model="queryForm.office" size="mini" clearable placeholder="请选择教研室" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in officeList" :key="index" :label="item.deptName" :value="item.deptName" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="55px" label="状态">
        <el-select v-model="queryForm.status" size="mini" clearable placeholder="请选择状态" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in statusList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <div class="button-style" style="width: 80px; margin-top: 6px;" @click="handleSearch">
        <img src="@/assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
      <div style="display: flex; flex-direction: row-reverse;">
        <div class="button-style" style="width: 60px; margin-top: 6px; margin-left: 15px;" @click="handleSubmit">
          <span>提&nbsp;交</span>
        </div>
        <div class="button-style" style="width: 60px; margin-left: 30px; margin-top: 6px; background: #FFF6F0; border: 1px solid #E9B535;" @click="handleSave">
          <span style="color: #E9B535;">保&nbsp;存</span>
        </div>
      </div>
    </el-form>
     <el-table
      border
      :data="tableData"
      :span-method="handleRowSpan"
      @selection-change="handleSelectionChange"
      class="xpaas-table-class"
      row-class-name="xpaas-row-class"
      cell-class-name="xpaas-cell-class"
      header-row-class-name="xpaas-header-row-class"
      header-cell-class-name="xpaas-header-cell-class">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="statusName" label="状态" show-overflow-tooltip align="center" />
      <el-table-column prop="zhiwei" label="培养层次" show-overflow-tooltip align="center" />
      <el-table-column prop="zhiweilevel" label="职称" show-overflow-tooltip align="center" />
      <el-table-column prop="jyroom" label="教研室" show-overflow-tooltip align="center" />
      <el-table-column prop="teachername" label="教员姓名" show-overflow-tooltip align="center" />
      <el-table-column prop="cdkc" label="承担课程" show-overflow-tooltip align="center" />
      <el-table-column prop="zybc" label="教学班" show-overflow-tooltip align="center" />
      <el-table-column prop="cdxs" label="承担学时" show-overflow-tooltip align="center" />
      <el-table-column prop="tolxs" label="总学时" show-overflow-tooltip align="center">
        <template slot-scope="scope">
              <span style="margin-left: 10px">{{num}}</span>
      </template>
      </el-table-column>
      <el-table-column prop="ddtkfs" label="督导听课分数" show-overflow-tooltip align="center" />
      <el-table-column prop="ddtkavg" label="督导听课平均分" show-overflow-tooltip align="center" />
      <el-table-column label="专家评价等级" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <el-select v-if="scope.row.zzsftj === '0' || scope.row.zzsftj === '1'" v-model="scope.row.zjpjdj" size="mini" placeholder="请选择评价等级" @change="handleChangeValue(scope.row)">
            <el-option v-for="(item, index) in gradeList" :key="index" :label="item.label" :value="item.value" />
          </el-select>
          <span v-if="scope.row.zzsftj === '2' || scope.row.zzsftj === '3'">{{ scope.row.zjpjdj }}</span>
        </template>
      </el-table-column>
      <el-table-column label="专家评分" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <el-input-number v-if="scope.row.zzsftj === '0' || scope.row.zzsftj === '1'" v-model="scope.row.zjpf" controls-position="right" size="mini" :min="0" :max="100" placeholder="请输入专家评分" style="width: 100%;" @change="handleChangeValue(scope.row)" />
          <span v-if="scope.row.zzsftj === '2' || scope.row.zzsftj === '3'">{{ scope.row.zjpf }}</span>
        </template>
      </el-table-column>
    </el-table> 
    <div class="button-style" style="width: auto; margin-top: 15px; border-color: #f3b815; background-color: #fff6ef;">
      <img src="@/assets/assessment/icon-export.png" />
      <download-excel
        :data="tableData"
        :fields="jsonFields"
        type="xls"
        name="督导评教结果提交.xls"
        style="color: #f3b815; font-size: 14px;">
        <span>导出Excel</span>
      </download-excel>
    </div>
  </div>
</template>

<script>
import { reqGetXqList, reqCheckLevelList, queryDictByCode } from '@/api/admin1/check'
import { getClass } from '@/api/course/courses'
import { updateSzhzBatch } from '@/api/teacher/admin'
import { updateEvaluationResult } from '@/api/teachingEvaluation/summary'
export default {
  data() {
    return {
      tableData: [],
      queryForm: {
        semester: '',
        level: '',
        position: '',
        teacherName: '',
        office: '',
        status: '',
        spanRow:'',
        num:''
      },
      semesterList: [],
      levelList: [],
      positionList: [],
      officeList: [],
      teacherId: '',
      spanArray: [],
      gradeList: [
        { label: 'A', value: 'A' },
        { label: 'B', value: 'B' },
        { label: 'C', value: 'C' },
        { label: 'D', value: 'D' }
      ],
      statusList: [
        { label: '待填写', value: '0' },
        { label: '已保存', value: '1' },
        { label: '已提交', value: '2' },
        { label: '已发布', value: '3' }
      ],
      selectedRows: [],
      jsonFields: {
        状态: 'statusName',
        培养层次: 'zhiwei',
        职称: 'zhiweilevel',
        教研室: 'jyroom',
        教员姓名: 'teachername',
        承担课程: 'cdkc',
        教学班: 'zybc',
        承担学时: 'cdxs',
        总学时: 'tolxs',
        督导听课分数: 'ddtkfs',
        督导听课平均分: 'ddtkavg',
        专家评价等级: 'zjpjdj',
        专家评分: 'zjpf'
      }
    }
  },
  mounted() {
    reqGetXqList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.semesterList = res.data.data
        this.queryForm.semester = res.data.data[0].id
        reqCheckLevelList().then(res => {
          if(res.data.data && res.data.data.length > 0){
            this.levelList = res.data.data[0].children
            this.queryForm.level = res.data.data[0].children[0].id
            this.handleSearch()
          }
        })
      }
    })
    getClass().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.officeList = res.data.data
      }
    })
    queryDictByCode('zhiweilevel').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.positionList = res.data.data[0].childdictBizs
      }
    })
  },
  methods: {
    handleSearch: function () {
      const params = {
        termid: this.queryForm.semester,
        zhiweiid: this.queryForm.level,
        zhiweilevel: this.queryForm.position,
        teachername: this.queryForm.teacherName,
        jyroom: this.queryForm.office,
        zzsftj: this.queryForm.status
      }

      updateEvaluationResult(params).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.tableData = res.data.data
          let record, hourArray
          this.tableData.forEach((item, index) => {
            if (this.teacherId !== item.teacherid) {
              this.teacherId = item.teacherid
              this.spanArray.push(index)
              record = this.tableData.filter(subItem => {
                  return subItem.teacherid === item.teacherid
              })
              hourArray = []
              record.forEach(item => {
                hourArray.push(item.cdxs)
              })
             item.tolxs = eval(hourArray.join('+'))
             this.num = item.tolxs
             item.spanRow = record.length
             this.spanRow = item.spanRow
            }
            record = this.statusList.find(subItem => {
              return subItem.value === item.zzsftj
            })
            item.statusName = record.label
          })
        }else{
          this.tableData = []
        }
      })
    },
    handleSave: function () {
      const selectedRows = this.selectedRows.filter(item => {
        return item.zzsftj === '0' || item.zzsftj === '1'
      })
      if (selectedRows.length === 0) {
        this.$message.warning('无可保存的数据！')
      } else {
        let data = []
        let flag = false
        selectedRows.forEach(item => {
          if (item.zjpjdj === '') {
            flag = true
          }
          if (item.zjpf === undefined) {
            flag = true
          }
          data.push({ id: item.id, zjpjdj: item.zjpjdj, zjpf: item.zjpf, zzsftj: '1' })
        })
        if (flag) {
          this.$message.warning('请输入所有选择行的专家评价等级及评分！')
        } else {
          updateSzhzBatch(data).then(res => {
            if (res.data.success) {
              this.$message.success('数据保存成功！')
              this.handleSearch()
            }else {
              this.$message.warning('数据保存失败！')
            }
          })
        }
      }
    },
    handleSubmit: function () {
      const selectedRows = this.selectedRows.filter(item => {
        return item.zzsftj === '0' || item.zzsftj === '1'
      })
      if (selectedRows.length === 0) {
        this.$message.warning('无可提交的数据！')
      } else {
        let data = []
        let flag = false
        selectedRows.forEach(item => {
          if (item.zjpjdj === '') {
            flag = true
          }
          if (item.zjpf === undefined) {
            flag = true
          }
          data.push({ id: item.id, zjpjdj: item.zjpjdj, zjpf: item.zjpf, zzsftj: '2' })
        })
        if (flag) {
          this.$message.warning('请输入所有选择行的专家评价等级及评分！')
        } else {
          updateSzhzBatch(data).then(res => {
            if (res.data.success) {
              this.$message.success('数据提交成功！')
              this.handleSearch()
            }else {
              this.$message.warning('数据提交失败！')
            }
          })
        }
      }
    },
    handleRowSpan: function ({ row, rowIndex, columnIndex }) {
      if (columnIndex <= 5 || columnIndex === 9 || columnIndex >= 11) {
        if (this.spanArray.indexOf(rowIndex) >= 0) {
          return {
            rowspan: this.spanRow,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    handleSelectionChange: function (val) {
      let records
      this.selectedRows = []
      val.forEach(item => {
        records = this.tableData.filter(subItem => {
          return subItem.teacherid === item.teacherid
        })
        records.forEach(item => {
          this.selectedRows.push(item)
        })
      })
    },
    handleChangeValue: function (row) {
      const records = this.tableData.filter(item => {
        return item.teacherid === row.teacherid
      })
      records.forEach(item => {
        item.zjpjdj = row.zjpjdj
        item.zjpf = row.zjpf
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .button-style {
    float: left;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
    > span {
      font-size: 14px;
      color: #51aef6;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }
</style>
